<template>
	<view class="page">
	
		<backTop v-if='toTop'></backTop>
		<view class="fixedTabs flex-box" >
			<view :class="{thmeColor:current == 0}" @click="tabCheck(0,'任何')" :style="{'--color': color}">全部</view>
			<view :class="{thmeColor:current == 1}" @click="tabCheck(1,'有图')" :style="{'--color': color}">有图</view>
			<view class="bottomLine thmeBg" :style="{left:current*50+'%','--color': color}"></view>
		</view>
		
		<view class="comment-list">
			<view class="comment-item" v-for="(item,index) in commentList" :key='index'>
				<view class="flex-box align-center">
					<image class="avatar" :src="item.v_headimg?item.v_headimg:staticUrl+'/images/head.jpg'" mode=""></image>
					<view class="userName flex lines">
						{{item.v_name}}
					</view>
					<text class="icon-more iconfont" @click="editComment(item.comment_id,index)"></text>
				</view>
				<view style="padding: 0 30rpx;position: relative;">
					<view class="flex-box time-box">
						<view class="flex">
							<view class="starBox"> 
								<block v-for="i in 5" :key='i'>
									<text class="iconfont icon-xingxing1"></text>
								</block>
								<view class="starMask" :style="{width: parseFloat(item.star)/5*100+'%'}">
									<block v-for="i in 5" :key='i'>
										<text class="iconfont icon-xingxing"></text>
									</block>
								</view>
							</view>
						</view>
						<text>{{item.created_at}}</text>
					</view>
					<view class="comment-txt">
						{{item.comment_word}}
					</view>
					<ImgLayOut v-if='item.comment_pic' :imgData='item.comment_pic'></ImgLayOut>
					<view class="goods-box flex-box" @click="toGoods(item.goods_id)">
						<image class="goods-img" :src="item.img?imgUrl+item.img:staticUrl+'/images/imageLoading.png'" mode=""></image>
						<view class="flex flex-box flex-between">
							<view class="goods-name lines2">
								{{item.goods_name}}
							</view>
							<view class="goods-price myPrice">
								{{item.price}}
							</view>
						</view>
					</view>
					
					
				</view>
				<!-- 商家回复 -->
				<view class="storeReplay" v-if='item.comment_receive'>
					<view class="thmeBg" :style="{'--color': color}"></view>
					<view class="flex-box flex-between align-center">
						<text class="thmeColor replayS" :style="{'--color': color}">商家回复：</text>
						<text class="thmeColor replayT" :style="{'--color': color}">{{item.updated_at}}</text>
					</view>
					<view class="replayTxt thmeColor" :style="{'--color': color}">
						{{item.comment_receive}}
					</view>
				</view>
			</view>
		</view>
		
		<emptys v-if='noData' :title='"还没有"+msg+"评论哦 ~"'></emptys>
		
		<view v-if='showDiLine' class="DiLine">
			------- 我也是有底线的 -------
		</view>
		
		<edit v-if="showEdit" 
		 btns='删除'
		 @cancel='showEdit=false' @change='edit'></edit>
		 
		 <showModel v-if='showModal' @cancelFunc='showModal=false' type='99' 
		 @certain='certain_'
		 msg='删除后将不可恢复'
		 title='是否确定删除该评论'
		 btn1='取消' 
		 btn2='我很确定'></showModel>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	import ImgLayOut from "../components/imgLayOut.vue"
	import edit from "../components/edit.vue"
	export default {
		components:{ImgLayOut,edit},
		data() {
			return {
				current:0,
				staticUrl: this.staticUrl,
				msg:'',
				imgUrl: this.imgUrl,
				noData: false,
				
				toTop:false,
				currTab:0,
				commentList: [],
				count:'',// 评论数量
				page: 1,
				limit: 10,
				goodsId: '', // 商品id
				type: '', // 查看的评价列表类型   ''全部  0好评 1中评 2差评  
				hasImg: '', // 是否有图 1有图
				more: false,
				showDiLine: false,
				showEdit:false,
				showModal: false,
				comment_id:'',
				comment_index:''
			};
		},
		onLoad(e) {
			this.get_my_comment()
		},
		methods:{
			edit(type){
				if(type == 0) this.showModal = true
			},
			editComment(id,index){
				this.comment_id = id
				this.comment_index = index
				this.showEdit = true
			},
			certain_(){ // 删除评论
				this.$http.post({
					url:'/singleSaleApi/comment_del',
					data:{
						comment_id: this.comment_id
					}
				}).then(res => {
					this.showModal = false
					if(res.errcode != 100) return this.$Toast(res.msg)
					this.showEdit = false
					this.commentList.splice(this.comment_index,1)
					if(this.commentList.length < 1 || !this.commentList) this.noData = true
				})
			},
			tabCheck(i,msg){
				if(this.current != i){
					this.current = i
					this.hasImg = i
					this.page = 1
					this.msg = msg
					this.commentList = []
					uni.pageScrollTo({
						duration: 0,
						scrollTop: 0
					})
					this.get_my_comment()
				}
			},
			get_my_comment(){ // 获取评论列表
				this.more = false;
				this.noData = false;
				this.showDiLine = false;
				this.$http.get({
					url:'/singleSaleApi/get_my_comment',
					data:{
						page: this.page,
						pageNum: this.limit,
						has_img: this.hasImg
					}
				}).then(res => {
					if(res.errcode != 100) return this.$Toast(res.msg)
					const result = res.data || []
					this.commentList = this.commentList.concat(result);
					if(result.length > this.limit - 1) this.more = true;
					if(this.commentList.length > 1 && (!result || result.length < this.limit)) this.showDiLine = true
					if(this.commentList.length < 1) this.noData = true
				})
			},
		},
		onPageScroll(e) {
			if (e.scrollTop > 200) {
				this.toTop = true
			} else {
				this.toTop = false
			}
		},
		onReachBottom() {
			if(this.more){
				this.page ++
				this.get_my_comment()
			}
		},
		computed:{
			...mapState(['tabTitle','color','city','navHeight','System','vid','share']),
		},
	}
</script>

<style lang="scss" scoped>
	.fixedTabs{
		justify-content: space-around;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background-color: #FFFFFF;
		z-index: 33;
		border-bottom: 1px solid #F2F2F2;
		.bottomLine{
			width: 50%;
			position: absolute;
			height: 4rpx;
			bottom: 0;
			left: 0;
			transition: all .3s;
		}
		>view{
			flex: 1;
			text-align: center;
			line-height: 76rpx;
			font-size: 28rpx;
		}
		
	}
	
	.comment-list{
		
		margin-top: 76rpx;
		.comment-item{
			padding: $uni-page-space;
			border-bottom: 20rpx solid #F8F8F8;
			.avatar{
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				margin-right: 10rpx;
			}
			.userName{
				font-size: 28rpx;
			}
			.icon-more{
				font-size: 36rpx;
				color: #999999;
			}
			
			.time-box{
				margin: 20rpx 0;
				text{
					color: #999999;
				}
			}
			
			.comment-txt{
				font-size: 26rpx;
				line-height: 36rpx;
				padding-bottom: 20rpx;
			}
			
			.goods-box{
				background-color: #F8F8F8;
				>view{
					padding: 16rpx;
					flex-direction: column;
				}
				.goods-img{
					width: 160rpx;
					height: 160rpx;
				}
				.goods-name{
					font-size: 28rpx;
				}
				.goods-price{
					font-size: 32rpx;
				}
			}
		}
	}
	
	.starBox{
		width: 180rpx;
		position: relative;margin-left: -6rpx;}
	.star{width: 30rpx;height: 30rpx;margin: 0 6rpx;}
	.starMask{position: absolute;height: 100%;top: 0;left: 0;background: #FFFFFF;overflow: hidden; opacity: .8;white-space: nowrap;}
	.starMask .star{display: inline-block;margin-bottom: 20rpx;}
	
	
	/* 商家回复 */
	.storeReplay{margin: 30rpx -30rpx -24rpx -30rpx;padding: 30rpx 60rpx;position: relative;margin-bottom: -$uni-page-space;}
	.noReplay .thmeBg,.storeReplay .thmeBg{position: absolute;width: 100%;height: 100%;top: 0;left: 0;border-radius: 0 0 10rpx 10rpx;opacity: .05;}
	.replayS{opacity: 0.8;}.replayT{opacity: 0.6;}.replayTxt{margin-top: 20rpx;}
	.noReplay{
		height: 78rpx;margin: -30rpx -30rpx -40rpx -30rpx;z-index: -1;
	}
	.noReplayRadious{border-radius: 10rpx 10rpx 0 70rpx;}
</style>
